<template>
  <div>
    <div class="box">
      <div class="box-body">
        <el-form :inline="true" :model="query" label-position="top">
          <el-form-item label="周期:">
            <el-col :span="11">
              <el-date-picker v-model="query.startTime" type="date" placeholder="(>=)期初时间" />
            </el-col>
            <el-col :span="2" class="text-center">至</el-col>
            <el-col :span="11">
              <el-date-picker v-model="query.endTime" type="date" placeholder="(<=)期末时间" />
            </el-col>
          </el-form-item>
          <el-form-item label="所属分销商:">
            <el-select v-model="query.dtbId" multiple filterable remote placeholder="选择分销商" 
              :remote-method="loadDtbList">
              <el-option v-for="dtb in dtbList" :key="dtb.id" :label="dtb.shortName" :value="dtb.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="no-top-label">
            <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  
    <el-table :data="page.content" v-loading.body="loading" border
      show-summary :summary-method="summary">
      <el-table-column prop="id" label="#ID" width="100" ></el-table-column>
      <el-table-column prop="shortName" label="分销商" width="150" ></el-table-column>
      <el-table-column prop="amount" label="订单数" width="100" >
        <template slot-scope="scope">
          {{scope.row.amount}}
        </template>
      </el-table-column>
      <el-table-column prop="sale" label="销售" >
        <template slot-scope="scope">
          {{scope.row.sale}}
        </template>
      </el-table-column>
      <el-table-column prop="refund" label="退款">
        <template slot-scope="scope">
          {{scope.row.refund}}
        </template>
      </el-table-column>
      <el-table-column prop="recharge" label="充值">
        <template slot-scope="scope">
          {{scope.row.recharge}}
        </template>
      </el-table-column>
      <el-table-column prop="opening" label="期初结存">
        <template slot-scope="scope">
          {{scope.row.opening}}
        </template>
      </el-table-column>
      <el-table-column prop="closing" label="期末结存">
        <template slot-scope="scope">
          {{scope.row.closing}}
        </template>
      </el-table-column>
      <el-table-column label="结差">
        <template slot-scope="scope">
          {{(scope.row.closing - scope.row.opening)}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="getStatus(scope.row)">正常</el-tag>
          <el-tag type="danger" v-else>异常</el-tag>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" 
      :page-size="page.pageSize" :total="page.totalElements" 
      layout="total, prev, pager, next, jumper" />
  </div>
</template>

<script>
import { Dtb, Utils } from '@/store/api'
import Pagination from '@/utils/pagination'
import * as Constants from '@/constants'
export default {
  data() {
    return {
      ...Constants,
      loading: true,
      query: {
        status: '',
        startTime: new Date(),
        toDate: null,
        dtbId: null
      },
      page: {
        content: []
      },
      dtbList: []
    }
  },
  created() {
    this.loadPage(1)
    this.loadDtbList()
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.loading = true
      return Dtb.listStat(query).then((data) => {
        this.page = data
        this.loading = false
      })
    },
    loadDtbList(query) {
      Dtb.list({'keyword': query}).then((page) => {
        this.dtbList = page.content
      })
    },
    getStatus(stat) {
      let used = stat.closing - stat.opening
      let cacl = stat.refund + stat.recharge - stat.sale
      return used === cacl
    },
    summary(table) {
      let {columns, data} = table
      const summary = []
      const sumaryCentColumns = ['sale', 'refund', 'opening', 'closing']
      const sumaryColumns = ['recharge', 'amount']
      columns.forEach((column, index) => {
        if (index === 0) {
          summary[index] = '合计'
        } else if (sumaryCentColumns.indexOf(column.property) >= 0) {
          summary[index] = Utils.sum(data, column.property)
        } else if (sumaryColumns.indexOf(column.property) >= 0) {
          summary[index] = Utils.sum(data, column.property)
        } else {
          summary[index] = null
        }
      })
      return summary
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 100%;
}

.display-form .display-item label {
  width: 100px;
}
</style>
